<template>
    <div>
        <div class="classification">
            <h2>菜品分类</h2>
            <div class="add" @click="add">
                <el-button type="primary" plain>添加</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    width="50%"
                    class="myTable"
                    height="670"
            >
                <el-table-column
                        prop="id"
                        label="菜品分类编码"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="菜品类型"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="is_delete"
                        label="上下架，1表示下架，0表示上架"
                        width="300">
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="change(`${scope.row.id}`, `${scope.row.name}`,`${scope.row.is_delete}`)"></el-button>
                        <el-button v-if="!scope.row.is_delete" type="danger" icon="el-icon-delete" circle @click="myDelete(`${scope.row.id}`)"></el-button>
                        <el-button v-if="scope.row.is_delete" type="info" icon="el-icon-refresh-right" circle @click="restore(`${scope.row.id}`)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer
                    :title="title"
                    :visible.sync="drawer"
                    :direction="direction"
            >
                <hr>
                <div>
                    <el-input
                            placeholder="请输入商品类型"
                            prefix-icon="el-icon-menu"
                            v-model="name"
                            style="margin-bottom: 20px;
                                    margin-top: 20px;
                                  "
                    >
                    </el-input>
                    <el-button type="primary" icon="el-icon-edit" circle @click="change1" v-if="flag"></el-button>
                    <el-button type="primary" icon="el-icon-plus" circle @click="add1" v-if="!flag"></el-button>
                </div>
            </el-drawer>

        </div>
    </div>
</template>

<script>
    import {getfoodclass, addfoodclass, deletefoodclass, changefoodclass} from '../api/api'
    export default {
        name: "classification",
        data() {
            return {
                tableData: [],
                drawer: false,
                direction: 'rtl',
                title:'',
                name:'',
                is:'',
                flag: false,
                id:''
            }
        },
        methods:{
            //添加菜品分类
            add(){
                this.title = '添加菜品分类'
                this.drawer = true
            },
            add1(){
                addfoodclass(this.name).then(res=>{
                    // console.log(res)
                    this.name = ''
                    if(res.status == 0){
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }
                    this.drawer = false
                    this.get()
                })
            },
            //修改菜品分类
            change(id, name, isdelete){
                this.drawer = true
                this.flag = true
                this.title = '修改菜品分类'
                this.name = name
                this.is = isdelete
                this.id = id
            },
            change1(){
                changefoodclass(this.id,this.name).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                    this.get()
                    this.drawer = false
                })
            },
            //下架菜品分类
            myDelete(id){
                deletefoodclass(id,1).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            message: '下架成功',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: '下架失败',
                            type: 'error'
                        });
                    }
                    this.get()
                })
            },
        //    恢复菜品分类
            restore(id){
                deletefoodclass(id,0).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.$message({
                            message: '上架成功',
                            type: 'success'
                        });
                    }else {
                        this.$message({
                            message: '上架失败',
                            type: 'error'
                        });
                    }
                    this.get()
                })
            },
        //    获取菜品分类
            get(){
                getfoodclass().then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.tableData = res.data
                    }
                })
            }

        },
        created() {
            this.get()
        }
    }
</script>

<style scoped>
    .classification {
        width: 100%;
        padding-left: 50px;
        padding-right: 200px;
        box-sizing: border-box;
    }
    .myTable {
        margin-top: 30px;
    }
    /deep/.cell {
        text-align: center;
    }
    .add {
        margin-left: 75%;
    }
    .myImg {
        width: 100%;
    }
    /deep/.el-drawer__body{
        padding: 0 30px;
    }
    hr {
        margin-bottom: 30px;
    }
</style>
